 <!-- 菜单页代码  contextButton/index.vue -->
<template>
  <div id="contextmenu" class="contextmenu">
    <div
      class="contextmenu__item"
      v-for="(item, index) in menuList"
      :key="index"
      @click="handleMenu(item)"
    >
      {{item.title}}
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      menuList: [
        { title: "在上方插入行", value: "top" },
        { title: "在下方插入行", value: "bottom" },
      ],
    };
  },
  methods: {
    init(row, column, event, x_skewing = 0, y_skewing = 0) {
      // 设置菜单出现的位置
      // 具体显示位置根据自己需求进行调节
      let menu = document.querySelector("#contextmenu");
      menu.style.left = event.pageX - x_skewing + "px";
      menu.style.top = event.pageY - y_skewing + "px";
      document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
    },
    foo() {
      this.$emit("foo");
    },
    handleMenu(item) {
      this.$emit("handleMenu", item);
    },
  },
};
</script>

<style scoped>
.contextmenu__item {
  display: block;
  line-height: 30px;
  text-align: center;
}
.contextmenu__item:not(:last-child) {
  border-bottom: 1px solid rgba(64, 158, 255, 0.2);
}
.contextmenu {
  position: fixed;
  background-color: #ecf5ff;
  width: 120px;
  /*height: 106px;*/
  font-size: 12px;
  color: #409eff;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid rgba(64, 158, 255, 0.2);
  white-space: nowrap;
  z-index: 1000;
}
.contextmenu__item:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
</style>
